<template>
	<view class="content">
		<image src="../../static/img/login-bg.png" mode=""></image>
		<view class="con">
			<view :style="{height:getstateheight()+'px'}"></view>
			<view  class="titile" :style="{height:gettitileheight()+'px'}">
				<view class="addresss"  style="width:200rpx;" @click="addressref.show()" >{{titAddressData}} <view class="iconfont icon-jiantou_zuo" ></view> </view>
				<view class="" @click="chooseaddress">房屋租赁</view>
				<view class="" style="width:200rpx;"></view>
			</view>
			<view class="showcon">
				<view class="showcon-con">
					<view class="top">
						<SyNavVue @changeoptiontype="changeoptiontype" @changeoptionsum="changeoptionsum" />
					</view>
					<view class="bottom">
						<SyShowconVue v-if="hosedata" :hosedata="hosedata" @abc="abc" :currdata="currdata" @changeindex="changeindex" @changezz="changezz" @openciti="openciti"/>
					</view>
				</view>
			</view>
		</view>
			<uni-data-picker  :localdata="arr"  ref="addressref" placeholder="请选择地址" popup-title="请选择城市"  @change="onchange" :preload="true"></uni-data-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {arr} from '@/static/addr.js'
	import SyNavVue from '../../components/syNav/syNav.vue';
	import SyShowconVue from '../../components/syShowcon/syShowcon.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import userstore from '@/store/userlogin.js'
	import ltstore from '@/store/lt.js'
	const useltstore=ltstore()
	import {
		getstateheight,
		gettitileheight
	} from '@/utils/getinfo.js'
	import {
		gethoseaddress,
		gethosealllove
	} from '@/api/index.js'
	const titAddressData=ref("浉河区")
	const addressref=ref()
	const useuserstore = userstore()
	const QQMapWX = require("../../static/qqmap-wx-jssdk.js")
	const findhoseoption = ref({
		address: '',
		type: "0",
		sum: "3",
		area: 0,
		price: 0,
		limit: 6,
		offset: 1
	})
	const openciti=()=>{
		addressref.value.show()
	}
	const onchange=e=>{
		const data=e.detail.value.map(e=>e.text)
		findhoseoption.value.address=data.join('')
		const index=findhoseoption.value.address.indexOf("市")
		titAddressData.value=findhoseoption.value.address.slice(index+1)
		hosedata.value = []
		findhoseoption.value.offset = 1
		findhoseoption.value.price=0
		findhoseoption.value.area = 1
		getdata()
	}
	const hosedata = ref([])
	const currdata = ref([])
	const chooseaddress = () => {
		uni.getLocation({
			success(da) {
				console.log(da)
			},
			fail(err) {
				console.log(err)
			}
		})
	}
	const changeoptiontype = e => {
		findhoseoption.value.type = e
		hosedata.value = []
		findhoseoption.value.offset = 1
		getdata()
	}
	const changeindex=e=>{
		  findhoseoption.value.area=e
		  console.log(e)
		  findhoseoption.value.price=0
		  hosedata.value = []
		  findhoseoption.value.offset = 1
		  getdata()
	}
	const changezz=e=>{
		findhoseoption.value.price=e
		findhoseoption.value.area=0
		console.log(findhoseoption.value)
		hosedata.value = []
		findhoseoption.value.offset = 1
		getdata()
	}
	const abc = () => {
		if (currdata.value.length < 6) return
		findhoseoption.value.offset = findhoseoption.value.offset + 1
		getdata()
	}
	const changeoptionsum = e => {
		findhoseoption.value.sum = e
		hosedata.value = []
		findhoseoption.value.offset = 1
		getdata()
	}
	onLoad(() => {
		useltstore.ws()
		getuserallhoselove()
		const useaddress = new QQMapWX({
			key: "V3PBZ-J54LZ-PTCXB-ZYOG6-2F5FK-WOFC2"
		})
		useaddress.reverseGeocoder({
			location: {
				latitude: 32.143518,
				longitude: 114.037477
			},
			success(e) {
				findhoseoption.value.address = e.result.address_component.province + e.result
					.address_component.city + e.result.address_component.district
				getdata()
			},
			fail(e) {
				console.log(e)
			}
		})
	})
	const getuserallhoselove=async ()=>{
		const rudata=await gethosealllove()
		useuserstore.userlove=rudata.data
	}
	const getdata = async() => {
		console.log(findhoseoption.value)
		const rudata= await gethoseaddress(findhoseoption.value)
		if(rudata.code==200){
			hosedata.value = [...hosedata.value, ...rudata.data]
			currdata.value = rudata.data
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.input-value){
		height: 0;
	}
	.content {
		height: 100vh;
		width: 100vw;
		position: relative;
	}

	.con,
	image {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;

	}

	.con {
		z-index: 1;
		display: flex;
		flex-direction: column;

		.titile {
			font-size: 30rpx;
			color: #fff;
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 25rpx;
			.addresss{
				font-size: 25rpx;
				display: flex;
				align-items: center;
				color: #000;
				.iconfont{
					font-size: 25rpx;
					transform: rotate(-90deg);
				}
			}
		}

		.showcon {
			flex: 1;
			overflow: hidden;

			.showcon-con {
				padding: 80rpx 20rpx 0 20rpx;
				height: 100%;
				width: 100%;
				background: linear-gradient(to top, #f1f1f1 70%, transparent);
				overflow: hidden;

				.top {
					height: 30%;
					width: 100%;
				}

				.bottom {
					height: 70%;
					width: 100%;
					overflow: hidden;
				}
			}
		}
	}
</style>